<template>
  <div class="shopcart">
     <ul>
     	<li v-for="item in shopcart" :key="item.id">
			<img :src="item.src" >
			<div>
				<p>{{item.title}}x{{item.num}}</p>
			    <p>￥{{item.price}}</p>
				<p><button @click="del(item)">删除</button></p>
			</div>
		</li>
		
     </ul>
	 <p v-if="shopcart.length">总价：{{totalPrice}}</p>
	 <p v-else>购物车暂无商品</p>
  </div>
</template>
<script>
import {mapState,mapGetters} from 'vuex'
export default {
        name: 'ShopCart',
		//可以通过computed计算属性获取store里面的数据
		// computed:{
		// 	shoplist(){
		// 		return this.$store.state.shoplist
		// 	}
		// }
		//简化写法 vuex提供了mapstate辅助函数，可以简化Computed计算属性的写法
		// computed:{
		// 	shopcart(){
		// 		return this.$store.state.shopcart
		// 	},
		// 	totalPrice(){
		// 		return this.$store.getters.totalPrice
		// 	}
		// }
		computed:{
			 ...mapState(['shopcart']),
			 ...mapGetters(['totalPrice'])
		},
		methods:{
			del(item){
				this.$store.commit('del',item);
			}
		}
}
</script>
<style scoped>
		
	.shopcart{
		width: 100%;
		padding-bottom: 50px;
	}
	li{
		position: relative;
		border-bottom:1px solid #ccc ;
	}
	li div{
		display: inline-block;
		position: absolute;
		top:10px;
		width: 120px;
		line-height: 30px;
		font-size: 14px;
	}
	img{
		width: 100px;
		border: 1px solid #ccc;
		margin: 10px 10px 8px 10px;
	}
	li div p:nth-of-type(1){
	   font-weight: bold;
	}	
	li div p:nth-of-type(2){
		color: #f00;
	}
		
	button{
		color: white;
		background: coral;
		border: none;
		padding: 5px;
	}
</style>
